<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; width:100%%; height:100%%; background-color:#000; }
        html { width:100%%; height:100%%; background-color:#000; }
        .container iframe, .container object, .container embed { position: absolute;top: 0; left: 0; width: 100%% !important; height: 100%% !important; }
    </style>
</head>
<body>
    <div class="container">
        <iframe id="player" src="https://player.vimeo.com/video/%@?badge=0&byline=0&portrait=0&title=0" width="100%" height="100%" frameborder="0"></iframe>
    </div>
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
        var iframe;
        var player;
        function invoke(command) {
            iframe.contentWindow.postMessage(JSON.stringify({ "event": "inject", "command": command }), "*");
        }
    
        var played = false;
        function play() {
            if (played) {
                player.play();
            } else {
                invoke("autoplay");
                played = true;
            }
        }
    
        function pause() {
            player.pause();
        }
    
        function seek(timestamp) {
            player.setCurrentTime(timestamp)
        }
        
        function setRate(rate) {
            player.setPlaybackRate(rate)
        }
    
        (function() {
            var playbackState = 1;
            var duration = 0.0;
            var position = 0.0;
            var downloadProgress = 0.0;
         
            iframe = document.querySelectorAll("iframe")[0];
            player = new Vimeo.Player(iframe);
            player.getCurrentTime().then(function(seconds) {
                position = seconds;
            });
            player.getDuration().then(function(seconds) {
                duration = seconds;
            });
            
            function updateState() {
                player.getPaused().then(function(paused) {
                    playbackState = paused ? 0 : 1;
                });
                player.getCurrentTime().then(function(seconds) {
                    position = seconds;
                });
                player.getDuration().then(function(seconds) {
                    duration = seconds;
                });
                window.location.href = "embed://onState?playback=" + playbackState + "&position=" + position + "&duration=" + duration + "&download=" + downloadProgress;
                invoke("initialize");
            }

            function onPlay(data) {
                playbackState = 1;
                updateState();
            }

            function onPause(data) {
                playbackState = 0;
                updateState();
            }
         
            function onFinish(data) {
                playbackState = 2;
                updateState();
            }
         
            function onPlayProgress(data) {
                position = data.seconds;
                duration = data.duration;
            }
         
            function onLoadProgress(data) {
                downloadProgress = data.percent;
            }
            
            player.on('play', onPlay);
            player.on('pause', onPause);
            player.on("ended", onFinish);
            
            window.setInterval(updateState, 500);
            
            if (%@) {
                invoke("autoplay");
            }
        })();
    </script>
</body>
</html>
